<!DOCTYPE html>
<html>

<head>
  <title>贪吃蛇</title>
  <canvas id="game"></canvas>
</head>

<style>
  #game {
    background-color: black;
  }
</style>
<script>
  var c = document.getElementById("game");
  var ctx = c.getContext("2d");
  var snake
  var food
  var direction;
  var max_length


  var cell_size = 30;
  var cell_spacing = 6;
  var canvas_height = 21;
  var canvas_width = 21;
  initial();
  show(snake);
  run();

  window.document.onkeydown = disableRefresh; //按键事件

  function disableRefresh(evt, data2048) {
    if (evt.keyCode) {
      if (evt.keyCode == 37 || evt.keyCode == 52) {
        // data2048 = move("L");
        if (!(direction == "L" || direction == "R")) {
          direction = 'L'
        }
        console.log("按下了left");
      }
      if (evt.keyCode == 39 || evt.keyCode == 54) {
        // data2048 = move("R");
        if (!(direction == "L" || direction == "R")) {
          direction = 'R'
        }
        console.log("按下了right");
      }
      if (evt.keyCode == 38 || evt.keyCode == 56) {
        // data2048 = move("U");
        if (!(direction == "U" || direction == "D")) {
          direction = 'U'
        }
        console.log("按下了UP");
      }
      if (evt.keyCode == 40 || evt.keyCode == 50) {
        // data2048 = move("D");
        if (!(direction == "U" || direction == "D")) {
          direction = 'D'
        }
        console.log("按下了DOWN");
      }
    }
  }

  function run() {
    var h
    var w


    if (direction == "D") {
      h = snake[0]["h"] + 1

      if (h >= canvas_height) {
        h = h - canvas_height
      }
      w = snake[0]["w"]
      if (w < 0) {
        w = canvas_height + w
      }
    } else if (direction == "U") {


      h = snake[0]["h"] - 1
      if (h < 0) {
        h = canvas_height + h
      }

      w = snake[0]["w"]
    } else if (direction == "L") {

      h = snake[0]["h"]

      w = snake[0]["w"] - 1
      if (w < 0) {
        w = canvas_height + w
      }

    } else if (direction == "R") {

      h = snake[0]["h"]

      w = snake[0]["w"] + 1
      if (w >= canvas_height) {
        w = w - canvas_height
      }

    }

    snake.unshift({ "w": w, "h": h }) // 添加新头部

    var food_1 = food //复刻数组
    for (var i = 0; i < food.length; i++) {
      // console.log("这里是检测食物是否被吃掉")

      if (food[i]['h'] == h && food[i]['w'] == w) {
        max_length += food[i]["quality"]
        food.splice(i, 1)
        random_food();//生成食物
      }
    }//检测是否吃掉食物

    for (var i = 1; i < snake.length; i++) {
      if (snake[i]["h"] == snake[0]['h'] && snake[i]["w"] == snake[0]['w']) {
        alert("你死了")
        initial();
      }

    }


    if (snake.length > max_length) {
      // console.log('删除')

      //    snake.pop;
      snake.splice(snake.length - 1, snake.length - 1)
      // console.log(snake)
    } //删除超标尾巴
    show(snake);
    setTimeout(run, 100);
    // console.log('运行中……')
  }

  function initial() { // 初始化
    snake = [];
    food = []
    direction;
    max_length


    cell_size = 30;
    cell_spacing = 6;
    canvas_height = 21;
    anvas_width = 21;
    c.height = (cell_size + cell_spacing) * canvas_height + cell_size * 2 + cell_spacing;
    c.width = (cell_size + cell_spacing) * canvas_width + cell_size * 2 + cell_spacing;

    //初始化
    snake.push(
      {
        w: Math.floor(canvas_width / 2),
        h: Math.floor(canvas_height / 2 + 1),
      },
      { w: Math.floor(canvas_width / 2), h: Math.floor(canvas_height / 2) },
      {
        w: Math.floor(canvas_width / 2),
        h: Math.floor(canvas_height / 2 - 1),
      }
    );//初始化诞生
    direction = "D"; //初始化方向
    max_length = 3;//最大体长
    random_food();//生成食物

    //     for(var w = 0;h<canvas_width;w++){
    // }
    //   ctx.stroke();
  }
  function show(snake) {


    for (var h = 0; h < canvas_height; h++) {
      for (var w = 0; w < canvas_width; w++) {
        ctx.fillStyle = "#555555";
        ctx.fillRect(
          (cell_spacing + cell_size) * (w + 1),
          (cell_spacing + cell_size) * (h + 1),
          cell_size,
          cell_size
        );
      }
    }//初始化画布


    // console.log(snake)
    //显示画布
    for (var i = 0; i < snake.length; i++) {
      h = snake[i]["h"];
      w = snake[i]["w"];
      if (i == 0) {
        ctx.fillStyle = "#ff0000";
      } else {
        ctx.fillStyle = "#111111";
      }
      ctx.fillRect(
        (cell_spacing + cell_size) * (w + 1),
        (cell_spacing + cell_size) * (h + 1),
        cell_size,
        cell_size
      );
    }//显示蛇身体


    for (var i = 0; i < food.length; i++) {
      h = food[i]["h"];
      w = food[i]["w"];
      ctx.fillStyle = "yellow";
      ctx.fillRect(
        (cell_spacing + cell_size) * (w + 1),
        (cell_spacing + cell_size) * (h + 1),
        cell_size,
        cell_size
      );
    }//显示食物
  }

  function random_food() {
    food.push({ "h": Math.floor(Math.random() * canvas_height), "w": Math.floor(Math.random() * canvas_width), "quality": 1 })
  }
</script>

</html>